<template>
  <div>
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVisible"
               width="50%"
               v-if="type=='role'"
               @open="openDialog"
               @close="handleCancel">
      <!-- 角色列表 -->
      <el-transfer v-model="selectedIds"
                   :data="List"
                   filterable
                   :props="ruleProps"
                   :titles="['可选角色', '已选角色']"
                   @change="handleChange">
      </el-transfer>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVisible"
               width="50%"
               v-else-if="type=='permission'"
               @open="openDialog"
               @close="handleCancel">
      <!-- 角色列表 -->
      <el-transfer v-model="selectedIds"
                   :data="List"
                   :props="ruleProps"
                   :titles="['可选权限', '已选权限']"
                   @change="handleChange">
      </el-transfer>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>


<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    dialogTitle: {
      type: String,
      default: "分配"
    },
    ids: {
      type: Array,
    },
    type: {
      type: String,
      default: "role"
    }
  },
  watch: {
    // 替换数据
    visible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val
      }
    },
    // 获取已选择的角色
    ids: {
      immediate: true,
      handler (val) {
        if (val)
          this.selectedIds = []
        // 每项的id放入已选列表中
        val.forEach(item => {
          this.selectedIds.push(item.id)
        })
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      page: 1, // 当前页码
      limit: 10, // 每页显示的数量
      total: 0, // 角色总数
      List: [], // 角色列表数据

      selectedIds: [], // 已选列表
      // 数据项自定义
      ruleProps: {
        key: 'id',
        label: this.type + "_name"
      },


    };
  },
  methods: {
    // 打开对话框回调
    openDialog () {
      const { type } = this
      // 打开对话框时加载列表数据
      if (type == 'role') {
        this.getRoleList();

      } else if (type == 'permission') {
        this.getPermissionList();
      }
      this.dialogVisible = true;
    },
    handleChange () {

    },
    // 获取角色列表
    async getRoleList () {
      const res = await this.$API.role.getAllRoleList();
      if (res.status === 200) {
        this.List = res.data;

      }
    },
    // 获取权限列表数据
    async getPermissionList () {
      const res = await this.$API.permission.getAllPermissionList();
      if (res.status === 200) {
        this.List = res.data;

      }
    },
    async handlePageChange (page) {
      const selectedIdsBackup = [...this.selectedIds];
      this.page = page;

      if (this.type === 'role') {
        await this.getRoleList();
      } else if (this.type === 'permission') {
        await this.getPermissionList();
      }

      // 在获取分页数据后，将备份的选中内容重新赋值给 selectedIds
      this.selectedIds = selectedIdsBackup.slice(0, this.limit);
    },

    handleConfirm () {
      // 点击确定按钮时的操作，将已选角色的role_id收集起来
      const roleIds = this.selectedIds.join(',');
      // 处理收集到的roleIds数据
      // ...
      this.dialogVisible = false;
      this.$emit("custom-confirm", roleIds)
      this.selectedIds = []
      this.List = []
    },
    handleCancel () {
      // 点击取消按钮时触发的自定义事件
      // 执行取消相关的操作
      this.selectedIds = [];

      this.dialogVisible = false;
      // 触发自定义事件
      this.$emit('custom-cancel');
    },
  }
};
</script>
